<template>
	<view class="product-card" @click="toDetail">
		<image class="title-image" :src="product.titleImage" mode="widthFix"></image>
		<view class="info">
			<text class="title ellipsis2">{{product.name}}</text>
			<text class="price">￥{{product.price}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"product-card",
		data() {
			return {
				
			};
		},
		props:{
			product: {
				type: Object,
				required: true
			}
		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url: '/pages/product-detail/product-detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.product-card{
	background: #fff;
	margin-bottom: .5em;
	border-radius: .5em;
	.info {
		padding:  0 .5em  .5em .5em;
	}
	.title-image{
		width: 100%;
		border-radius: .5em .5em 0 0;
	}
	.title{
		color: #333;
		font-size: 28rpx;
	}
	.price{
		color: #fa4126;
		font-weight: 700;
	}
}
</style>